<template>
  <view style="width: 750rpx ;height: 750rpx;">
    <l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
      :openSmooth="openSmooth"></l-signature>
  </view>
  <view>
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <!-- uvue 不支持 openSmooth -->
    <button @click="onClick('openSmooth')">压感{{ openSmooth ? '开' : '关' }}</button>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const signatureRef = ref(null)

  const penColor = ref('red')
  const penSize = ref(5)
  const url = ref('')
  const openSmooth = ref(true)

  const onClick = (type) => {
    uni.showToast({
      title: type,
      duration: 1000
    });
    if (type == 'openSmooth') {
      openSmooth.value = !openSmooth.value
      return
    }
    if (type == 'save') {
      signatureRef.value.canvasToTempFilePath({
        success: (res) => {
          console.log(res.isEmpty)
          this.url = res.tempFilePath
        }
      })
      return
    }
    if (signatureRef.value)
      signatureRef.value[type]()
  }
</script>

<style>
  /* 添加你的样式 */
</style>